<template>
  <view class="course-file">
    <view v-for="item in fileList" :key="item.id" class="course-file__item">
      <view class="picture">
        <u-image
          width="88"
          height="88"
          src="@/pageCourse/static/images/courseware_img.png"
        ></u-image>
      </view>
      <view class="content">
        <view class="title u-line-1">{{ item.attach_title }}</view>
        <view class="desc">
          下载<view class="count">{{ item.download_count || 0 }}</view
          >次
          <view class="line"></view>
          大小：{{ item.attach_data.filesize }}
        </view>
      </view>
      <view
        class="tool"
        v-if="course_buy == 1"
        :style="{
          color: globPrimaryColor,
          background: $u.colorToRgba(globPrimaryColor, 0.05),
        }"
        @click="handleDownload(item)"
      >
        <u-icon name="xiazai" custom-prefix="edu-icon" size="24" :color="globPrimaryColor"></u-icon>
        下载
      </view>
    </view>

    <edu-empty v-if="$u.test.empty(fileList)"></edu-empty>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    // id
    course_id: {
      type: Number,
      default: 0,
    },
    // 课程是否购买
    course_buy: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      fileList: [],
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
    }),
  },
  methods: {
    getFileData() {
      this.$edu.api.getCourseCourseware(this.course_id).then((res) => {
        const { data } = res
        this.fileList = data
      })
    },
    handleDownload(item) {
      uni.showLoading({
        title: '下载中',
      })
      uni.downloadFile({
        url: item.attach_data.fileurl,
        success: (res) => {
          item.download_count++
          this.$edu.api.postCourseCoursewareRecord({
            course_id: this.course_id,
            ware_id: item.attach_id,
          })
          let filePath = res.tempFilePath
          uni.openDocument({
            filePath: filePath,
            showMenu: true,
          })
        },
        complete: () => {
          uni.hideLoading()
        },
      })
    },
  },
  mounted() {
    this.getFileData()
  },
}
</script>

<style lang="scss" scoped>
.course-file {
  padding-left: 30rpx;
  &__item {
    display: flex;
    align-items: center;
    padding: 40rpx 30rpx 40rpx 0;
    border-bottom: 1px solid #f7f7f7;
    .content {
      flex: 1;
      min-width: 0;
      margin-left: 24rpx;
      .title {
        font-size: 28rpx;
        font-weight: 400;
        color: $edu-main-color;
        line-height: 32rpx;
      }
      .desc {
        margin-top: 12rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: $edu-tips-color;
        line-height: 36rpx;
        display: flex;
        align-items: center;
        .line {
          margin: 0 16rpx;
          width: 1rpx;
          height: 16rpx;
          background-color: #e4e7ed;
        }
        .count {
          color: $edu-main-color;
          font-weight: normal;
        }
      }
    }
    .tool {
      margin-left: 24rpx;
      width: 128rpx;
      height: 56rpx;
      font-size: 26rpx;
      font-weight: 400;
      line-height: 56rpx;
      text-align: center;
      border-radius: 28rpx;
    }
  }
}
</style>
